<script setup>
import { provideFormKey } from '../../../hooks/use-provide-key'

const { schema } = inject(provideFormKey)

const { field } = defineProps({
  field: Object,
})

const fieldName = computed(() => field.field)

defineOptions({ name: 'RenderTitle' })
</script>

<template>
  <div class="w-full">
    <component
      :is="field.props.tag"
      :key="field.props.id"
      v-model="schema.data[fieldName]"
      v-bind="{ style: field.props }"
      >{{ field.props.value }}</component
    >
  </div>
</template>
